<template>
    <div class="app-container">
        <div  class="top">
            <span class="msg">{{ msg.classesName }}·{{ msg.examName}}成绩报告</span>
            <el-button type="primary" style="margin-left: 8%;">成绩导出</el-button>
            <el-button type="info" style="margin-left:5%" @click="quit">退出</el-button>
        </div>
        <div class="main">
            <el-table ref="multipleTable" :data="tblData"  border style="width: 100%">
                <el-table-column align="center" label="排名" prop="rank"  width="100px"></el-table-column>
                <el-table-column align="center" prop="account" label="账号" width="300px"> </el-table-column>
                <el-table-column align="center" prop="username" label="姓名" width="350px"> </el-table-column>
                <el-table-column align="center" prop="totalScore" label="成绩" width="180px"> </el-table-column>
                <el-table-column align="center" prop="iscorrected" label="试卷状态"> 
                    <template slot-scope="scope">
                        <el-tag :type="getTagType(scope.row)" disable-transitions>
                            {{ getTagContent(scope.row.iscorrected) }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {scoreDetail} from '@/api/exam/exam'
export default {
    name:'ScoreAnalysis',
    data(){
        return{
            querForm:{
                examId:null,
                classesId:null
            },
            tblData:[],
            msg:{
                classesName:'',
                examName:''
            }
        }
    },
    mounted(){
        let examId = this.$route.params.examId
        let classesId = this.$route.params.classesId;
        if(!examId || !classesId){
            this.$router.go(-1);
            return;
        }
        this.querForm.examId = examId;
        this.querForm.classesId = classesId;
        this.msg.classesName = this.$route.params.classesName;
        this.msg.examName = this.$route.params.examName;
        scoreDetail(this.querForm).then(resp =>{
            this.tblData = resp.data;
        })

    },
    methods:{
        quit(){
            this.$router.go(-1)
        },
        getTagType(row){
            if(row.iscorrected === true){
                return "success";
            }
            if(row.iscorrected === false){
                return "warning";
            }
            return "danger";
        },
        getTagContent(val){
            if(val === true){
                return "已批改";
            }
            if(val === false){
                return "待批改";
            }
            return "缺考";
        }
    }
}
</script>

<style scoped>
    .top{
        /* text-align: center; */
        background: white;
        width: 100%; 
        height: 50px; 
        margin-bottom: 20px;
    }
    .msg{
        display: inline-block;
        width: 30%;
        margin-left: 40%;
        font-weight: bolder;
    }
</style>